<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0;}
        body{ padding: 100px; background: #2b2b2b; color: #ffffff;}
        ol{ margin: 10px 0 0 100px}
        p,div{ width: 200px; box-sizing: border-box}
        p{ margin: 10px 0;}
    </style>
    <script src="nhn/jquery-latest.js"></script>
    <script>
        $(function(){
            var cntB = 0;
            var cntA = 0;

            $('#btn1').click(function(){
                $('p').before('<div>Hello before!' + ++cntB + '</div>');
                // $('<div>Hello before!' + ++cntB + '</div>').insertBefore($('p'));
            });
            $('#btn2').click(function(){
                $('p').after('<div>Hello after!' + ++cntA + '</div>');
                // $('<div>Hello after!' + ++cntA + '</div>').insertAfter($('p'));
            });
        })
    </script>
</head>
<body>

<section>
    <button id="btn1">before</button>
    <button id="btn2">after</button>

    <br/><br/>

    <p>This is a paragraph.</p>
</section>

</body>
</html>